import React from 'react';
import {Table, Space, Layout, Select, DatePicker, Menu, Dropdown, Modal} from 'antd';
import {NavLink} from 'react-router-dom'
import './CapitalSub.css'
import {CopyOutlined, FileExcelOutlined} from "@ant-design/icons";
import {inject, observer} from "mobx-react";
const { Option } = Select;
const { Column} = Table;
const { RangePicker } = DatePicker;

function handleChange(value) {
    console.log(`selected ${value}`);
    // selectValue =`selected ${value}`
}
function onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra);
}
//资金明细
@inject('moneyMan')
@observer
class CapitalSubsidiary extends React.Component {
    constructor(props){
        super(props)
        this.state={
            dataA:[],
            clientId:this.props.moneyMan.CapitalAccountList.clientId,
            cashAccount:this.props.moneyMan.CapitalAccountList.cashAccount,
            prepaymentAccount:this.props.moneyMan.CapitalAccountList.prepaymentAccount,
            rebateAccount:this.props.moneyMan.CapitalAccountList.rebateAccount,
            totalAccount:this.props.moneyMan.CapitalAccountList.totalAccount,
            visible: false,
            paymentMethod:'',
            fundId:'',
            note:'',
            data:'',
        }
    }
    componentDidMount() {
        let b =this.props.moneyMan.CapitalAccountList
        console.log(this.props.moneyMan.CapitalAccountList.clientId)
        let a = Object.assign({}, b)
        let getData = this.state.dataA
        this.setState({
            dataA:[...getData,a]
        })
        // console.log(this.state.data)
        // console.log(this.props.location.state.title)
    }
     dropdownMenu=(text, record)=> {
        const menu = (
            <Menu>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" onClick={this.showModal.bind(this,text,record)} >
                        <CopyOutlined style={{marginRight:'10px'}}/>详情
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer"  onClick={this.PDetails.bind(this,text,record)}>
                        <FileExcelOutlined style={{marginRight:'10px'}}/>红冲
                    </a>
                </Menu.Item>
            </Menu>
        );
        return(
            <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                    . . .
                </a>
            </Dropdown>
        )
    }
    PDetails=(xx,yx,e)=> {
        e.preventDefault()
        console.log(123)
        console.log(yx)
        console.log(xx)
        console.log(e)
    }
    showModal = (text,record,e) => {
        let {totalAccount,paymentMethod,fundId,note,data}=text
        this.setState({
            visible: true,
            totalAccount:totalAccount,
            paymentMethod:paymentMethod,
            fundId:fundId,
            note:note,
            data:data,
        });
    };

    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    render() {
        const data = [
            {
                key: '1',
               zhangHu:'现金账户',
                yuE:this.state.cashAccount
            },
            {
                key: '1',
                zhangHu:'预付款账户',
                yuE:this.state.prepaymentAccount
            },
            {
                key: '1',
                zhangHu:'返点账户',
                yuE:this.state.rebateAccount
            },
            {
                key: '1',
                zhangHu:'总计',
                yuE:this.state.totalAccount
            },
        ];
        const columnsA = [
            {
                title: '支付流水单号',
                dataIndex: 'fundId',
                align:'center',
            },
            {
                title: '支付时间',
                dataIndex: 'data',
                align:'center',
            },
            {
                title: '资金账户',
                dataIndex: 'paymentMethod',
                align:'center',
            },
            {
                title: '摘要',
                dataIndex: 'summary',
                align:'center',
            },
            {
                title: '充值',
                dataIndex: 'amount',
                align:'center',
            },
            {
                title: '扣款',
                dataIndex: 'amount',
                align:'center',
            },
            {
                title: '账户余额',
                dataIndex: 'totalAccount',
                align:'center',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <span>
                {this.dropdownMenu(text, record)}
            </span>
                ),
            },
        ];
        const dataA = [
            {
                key: '1',
                fundId: this.props.moneyMan.CapitalAccountList.fundId,
                data: this.props.moneyMan.CapitalAccountList.data,
                paymentMethod: this.props.moneyMan.CapitalAccountList.paymentMethod,
                summary: this.props.moneyMan.CapitalAccountList.summary,
                amount: this.props.moneyMan.CapitalAccountList.amount,
                totalAccount: this.props.moneyMan.CapitalAccountList.totalAccount,
            },

        ];

        return (
            <div>
                <Layout>
                    <div className='BoxTop'>
                        <div className='leftMar'>
                            <span className='huiSe'>客户名称：</span><span>{this.state.clientId}</span>
                        </div>
                        <div className='leftMar'>
                            <span className='huiSe'>客户级别：</span><span>三级经理</span>
                        </div>
                        <div className='leftMar'>
                            <span className='huiSe'>总金额：</span><span>2256.00</span>
                        </div>
                        <div className='leftMar'>
                            <span className='huiSe'>待确认收款：</span><span className='redMon'>110000</span>
                        </div>
                        <div className='leftMar'>
                            <NavLink to='/homepage/paymentsure' style={{color:'green'}}>立即审核确认</NavLink>
                        </div>
                    </div>
                    <Table dataSource={data} pagination={false} style={{marginTop:'20px'}}>
                        <Column title="账户" dataIndex="zhangHu" key="zhangHu" />
                        <Column title="余额" dataIndex="yuE" key="yuE" />
                        <Column
                            title="操作"
                            key="action"
                            render={(text, record) => (
                                <Space size="middle">
                                    <a style={{color:'green'}}>充值</a>
                                    <a style={{color:'green'}}>扣款</a>
                                </Space>
                            )}
                        />
                    </Table>
                    <div style={{marginTop:'20px'}}>
                        <Select bordered={false} style={{marginLeft:'10px',width:120,marginRight:'20px'}} defaultValue="全部账户"  onChange={handleChange}>
                            <Option value="全部账户">全部账户</Option>
                            <Option value="现金账户">现金账户</Option>
                            <Option value="预付款账户">预付款账户</Option>
                            <Option value="返点账户">返点账户</Option>
                        </Select>
                        <RangePicker style={{width:400}}/>
                    </div>
                    <div className='centerBox'>
                        <div className='leftBox'>
                            <div className='baiZi'>
                                2270.00
                            </div>
                            <div className='baiZi'>
                                充值
                            </div>
                        </div>
                        <div className='rightBox'>
                            <div className='baiZi'>
                                14.00
                            </div>
                            <div className='baiZi'>
                                扣款
                            </div>
                        </div>
                    </div>
                    <Table columns={columnsA} dataSource={dataA} onChange={onChange} style={{marginTop:'20px'}}/>

                </Layout>
                <Modal
                    title="现金充值"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消"
                >
                    <p><span>充值资金账户：</span>现金账户</p>
                    <p><span>金额：</span>{this.state.totalAccount}</p>
                    <p><span>支付方式：</span>{this.state.paymentMethod}</p>
                    <p><span>备注：</span>{this.state.note}</p>
                    <div style={{marginTop:'40px'}}>
                        <span><span>流水号：</span>{this.state.fundId}</span>
                        <span style={{marginLeft:'20px'}}><span>日期：</span>{this.state.data}</span>
                    </div>
                    <div>
                        <span><span>操作人：</span>张经理</span>
                        <span style={{marginLeft:'20px'}}><span>审核人：</span>系统自动</span>
                    </div>

                </Modal>
            </div>
        );
    }
}

export default CapitalSubsidiary;






























